<template>
  <drop-carousel class="main-full float" @handleResize="H => height = H" @touchEnd="touctEnd" v-model="index">
    <drop-carousel-item>
      <x-banner :height="height" ref="XBanner"></x-banner>
    </drop-carousel-item>
    <drop-carousel-item>
      <banner4></banner4>
    </drop-carousel-item>
    <drop-carousel-item>
      <banner5></banner5>
    </drop-carousel-item>
    <drop-carousel-item inline>
      <m-footer></m-footer>
    </drop-carousel-item>
  </drop-carousel>
</template>

<script>
import XBanner from './xBanner'
import DropCarousel from '@/base/drop-carousel/drop-carousel'
import DropCarouselItem from '@/base/drop-carousel/drop-carousel-item'
import Banner4 from './banner-4'
import Banner5 from './banner-5'
import MFooter from '@/components/footer/footer'

export default {
  name: 'yBanner',
  data() {
    return {
      height: 200,
      index: 0
    }
  },
  mounted() {
  },
  methods: {
    touctEnd(p) {
      setTimeout(() => {
        if (this.index === 0 && Math.abs(p.deltaX) > Math.abs(p.deltaY) && Math.abs(p.deltaX) > 20) {
          if (p.deltaX > 0) {
            this.$refs.XBanner.prev()
          } else {
            this.$refs.XBanner.next()
          }
        }
      }, 1)
    }
  },
  components: {
    DropCarousel,
    DropCarouselItem,
    XBanner,
    Banner4,
    Banner5,
    MFooter
  }
}
</script>

<style lang="stylus">
@import '~common/stylus/variable.styl'

.main-full
  &.float
    .el-scrollbar__bar.is-horizontal
    .el-scrollbar__bar.is-vertical
      z-index: 50
    .dotList
      top: 60%
      right: 25px
      z-index: 50
      transform: none
</style>
